<template>
  <div class="common-card" v-if="cardData.length">
    <div class="common-card-item" v-for="item in cardData" :key="item.id">
      <!-- 图片 -->
      <div class="common-card-item-img">
        <img src="../../assets/images/schoolCover.png" alt="" />
      </div>
      <!-- 内容 -->
      <div class="display-padding14">
        <div class="common-card-item-content-title">{{ item.title }}</div>
        <div class="common-card-item-content">地址： {{ item.address }}</div>
        <div class="common-card-item-content">所属单位：{{ item.danwei }}</div>
        <div class="common-card-item-content">容纳人数：{{ item.people }}</div>
        <div class="display-common-horizontal-between">
          <div class="common-card-item-content">审批状态：{{ item.status }}</div>
          <div class="common-card-item-content" v-if="item.status === '未审核'">
            <el-icon style="font-size: 20px; color: #409eff; margin-right: 5px"
              ><QuestionFilled
            /></el-icon>
            空闲中
          </div>
          <div class="common-card-item-content" v-if="item.status === '审批成功'">
            <el-icon style="font-size: 20px; color: #67c23a; margin-right: 5px"
              ><SuccessFilled />
            </el-icon>
            使用中
          </div>
          <div class="common-card-item-content" v-if="item.status === '审批未通过'">
            <el-icon style="font-size: 20px; color: #f56c6c; margin-right: 5px"
              ><WarningFilled
            /></el-icon>
            审批中
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 暂无数据 -->
  <div class="common-card-empty" v-else>
    <el-empty :image-size="200" />
  </div>
</template>

<script setup>
import { ref, toRefs } from "vue";

//接受父组件传来的值
const props = defineProps({
  cardData: {
    type: Array,
    default: () => [],
  },
});
const { cardData } = toRefs(props);

//将值进行转换

//搜索框内容
</script>
<style lang="scss" scoped>
.common-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  // padding: 2em 6px;
  gap: 24px;
}

.common-card-item {
  width: calc((100% / 4) - 22px);
  margin: 4px 2px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px 10px 10px 10px;
}

.common-card-item-img {
  width: 100%;
  height: 130px;
  margin-bottom: 15px;
  img {
    height: 100%;
    width: 100%;
    border-radius: 10px 10px 0px 0px;
  }
}
.common-card-item-content-title {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 20px;
  color: #4d84fa;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 16px;
}
.common-card-item-content {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #707070;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 15px;
  display: flex;
}
</style>
